<template>
  <div>
    <el-row>
        <el-col :span="12" style="text-align: left;">
            <h2>更新菜单</h2>
        </el-col>
        <el-col :span="12" style="text-align: right;">
            <el-button-group>
            <el-button type="primary" @click="submit">确定</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
            </el-button-group>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <el-form ref="form" :inline="true" :model="menuForm" :rules="rules" class="demo-form-inline">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input v-model="menuForm.menuName" placeholder="请输入菜单名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"> 
                        <el-form-item label="菜单路径" prop="menuPath">
                            <el-input v-model="menuForm.menuPath" placeholder="请输入菜单路径" :disabled="partBanned"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"> 
                        <el-form-item label="父级菜单">
                            <el-select v-model="menuForm.frontMenu" placeholder="可选父级菜单" clearable :disabled="partBanned">
                                <el-option :label="menu.menuName" :value="menu.menuId" v-for="menu in originMenu" :key="menu.menuId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"> 
                        <el-form-item label="绑定角色" prop="bondRoles">
                            <el-select v-model="menuForm.bondRoles" placeholder="请选择要绑定的角色" multiple clearable>
                                <el-option v-for="role in originRoles" :key="role.roleId" :label="role.roleName" :value="role.roleId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: 'AddorEditMenu',
    data(){
        return{
            menuForm:{
                menuId:'',
                menuName:'',
                menuPath:'',
                frontMenu:'',
                bondRoles:[]
            },
            partBanned:false,
            originMenu:[],
            originRoles:[],
            rules:{
                menuName:[
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
                menuPath:[
                    { required: true, message: '请输入菜单路径', trigger: 'blur' },
                ],
                bondRoles:[
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ]
            }
            
        }
    },
    methods:{
        submit(){ 
            this.$refs["form"].validate(valid => {
                if(valid){
                    console.log(this.menuForm)
                    let form = {
                        menu:this.menuForm,
                        bondRoles:this.menuForm.bondRoles
                    }
                    this.$http.post("/lc/addorEditMenu",form).then(res => { 
                        if (res.data == "success"){
                            this.$router.push({
                                path: '/menuManager',
                                query: { 
                                    msg: "添加成功"
                                }
                            })
                        }
                    }).catch(err => {
                      console.error("Error submitting menu:", err);
                      this.$message.error("提交菜单失败: " + err.message);
                    })
                }
            })
        },
        cancel(){
            this.$router.push({
                path: '/menuManager'
            })
        },
        
        getRoles(){
            this.$http.get("/lc/getRole").then(res => {
                this.originRoles = res.data;
            }).catch(err => {
              console.error("Error getting roles:", err);
              this.$message.error("获取角色信息失败: " + err.message);
            })
        },
    },
    mounted(){
        this.getRoles();
        console.log(this.$route.query.originMenu)
        this.originMenu = this.$route.query.originMenu
        if (this.$route.query.menuInfo != null){
            console.log(this.$route.query.menuInfo)
            this.menuForm.menuId = this.$route.query.menuInfo.menuId
            this.menuForm.menuName = this.$route.query.menuInfo.menuName
            this.menuForm.menuPath = this.$route.query.menuInfo.menuPath
            this.menuForm.frontMenu = this.$route.query.menuInfo.frontMenu
            if (this.$route.query.menuInfo.frontMenu == 0){
                this.menuForm.frontMenu = ''
                this.partBanned = true
            }
            for (let i = 0; i < this.$route.query.bondRoles.length; i++) {
                // console.log(this.$route.query.bondRoles[i])
                this.menuForm.bondRoles.push(parseInt(this.$route.query.bondRoles[i]))
            }
        }
    }
}
</script>

<style>

</style>